<template>
  <div id="accountList_container">
    <div class="accountList_container_main">
      <p>账号列表</p>

      <el-table
        ref="mytable"
        :data="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column label="账号" prop="account"></el-table-column>
        <el-table-column label="用户组" prop="userGroup"></el-table-column>
        <el-table-column label="创建时间" prop="ctime"></el-table-column>
        <el-table-column label="操作" width="200">
          <!--  slot-scope: 接收每一行的动态数据,形参.row当前行的具体数据  形参.$index当前行的索引 -->
          <template slot-scope="btn">
            <el-button @click="clickedit(btn.row)">编辑</el-button>
            <el-button type="danger" @click="clickremove(btn.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- @size-change: 每页显示的条数发生变化，需要给一个methods，有形参（新的条数）
        @current-change: 点击了新的页数，需要给一个methods，有形参（新的页数）
        current-page: 当前分页组件的页数，默认为1
        page-sizes: 可以切换的条数数组 例：[5,10,15,20]
        page-size: 当前默认显示的条数  例：5 （默认取数组的第一个）
        total: 数据库数据总条数
        layout: 控制分页每个部件在页面的显示顺序（可以删除某一个，也可以交换位置） -->

      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="curpage"
        :page-sizes="changepagesizes"
        :page-size="curpagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
        >
      </el-pagination>

      <div class="accountList_operation">
        <el-button type="danger" @click="clickdel">批量删除</el-button>
        <el-button type="primary" @click="clickfalse">取消选择</el-button>
      </div>
    </div>

    <!-- 修改模态框 -->
    <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
      <div style="margin-bottom: 20px">
        <span>用户名</span>
        <el-input
          v-model="username"
          autocomplete="off"
          style="width: 300px"
        ></el-input>
      </div>
      <div>
        <span>用户组</span>
        <el-select v-model="usergroup" style="width: 300px">
          <el-option label="普通管理员" value="普通管理员" />
          <el-option label="超级管理员" value="超级管理员" />
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clicksave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addlist, removeuser, removeall, saveuser } from "@/apis/users";
import { getYYYYMMDD } from "@/utils/utils";

export default {
  data() {
    return {
      list: [],
      total: 0,
      changepagesizes: [5, 10, 15, 20],
      curpage: 1,
      curpagesize: 5,

      idslist: [],
      multipleSelection: [],

      dialogFormVisible: false,
      username: "",
      usergroup: "",
      userid: "",

      imageUrl: "",
    };
  },
  methods: {
    //头像相关
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //删除按钮
    clickremove(obj) {
      // console.log(obj.id);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeuser({ id: obj.id }).then((res) => {
            console.log(res.data.msg);
            this.tabledata();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //获取要删除的选项
    handleSelectionChange(valarr) {
      // this.multipleSelection = val;
      this.ids = valarr.map((obj) => obj.id);
      // console.log(this.ids);
    },
    //批量删除用户
    clickdel() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeall({ ids: JSON.stringify(this.ids) }).then(() => {
            this.tabledata();

            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //取消全选
    clickfalse() {
      // console.log(this.$refs.mytable);
      this.$refs.mytable.clearSelection();
    },

    //编辑用户信息
    clickedit(obj) {
      console.log(obj);
      this.dialogFormVisible = true;
      this.username = obj.account;
      this.usergroup = obj.userGroup;
      this.userid = obj.id;
    },

    //保存编辑后的信息
    clicksave() {
      this.dialogFormVisible = false;
      saveuser({
        id: this.userid,
        account: this.username,
        userGroup: this.usergroup,
      }).then((res) => {
        console.log(res.data.msg);
        this.tabledata();
      });
    },

    //每页显示条数
    sizechange(newsize) {
      // console.log(newsize);
      this.curpagesize = newsize; //先改变条数
      this.tabledata(); //再请求数据
    },

    //点击跳转的页数
    pagechange(newpage) {
      // console.log(newpage);
      this.curpage = newpage;
      this.tabledata();
    },

    tabledata() {
      //获取用户列表
      addlist({ currentPage: this.curpage, pageSize: this.curpagesize }).then(
        (res) => {
          console.log(res);
          for (const obj of res.data.data) {
            obj.ctime = getYYYYMMDD(obj.ctime);
          }

          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },
  },
  //加载列表和时间格式
  created() {
    this.tabledata();
  },
};
</script>

<style lang="less" scoped>
#accountList_container {
  height: 100%;
  background-color: #f0f2f5;
}

.accountList_container_main {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  p {
    line-height: 50px;
    border-bottom: 1px solid #f4f5f9;
    padding: 0 20px;
    color: #848485;
  }

  .el-pagination {
    margin: 20px 0 0 20px;
  }
}
.accountList_operation {
  padding: 20px;
}
</style>